import React from 'react';
import { View, Text, StyleSheet, TextInput, Image } from 'react-native';
import { Icon, Names as IconNames } from 'bee/components/Icon';
import PropTypes from 'prop-types';
import { px2dp } from 'bee/utils';
import { sizes, colors } from 'bee/themes';
import { alpha } from 'bee/utils/color';
import { Languages } from 'bee/constants/Languages';

import { AuthCode } from './AuthCode';

const { f2 } = sizes;

const ChooseImage = ({ title, source }) => (
  <View>
    <Image style={styles.image} source={source} />
    <View style={styles.imageCon}>
      <View style={styles.iconCon}>
        <Icon name={IconNames.paizhao} size={px2dp(42)} color="#eee" />
      </View>
    </View>

    <Text style={styles.chooseImageText}>{title}</Text>
  </View>
);

ChooseImage.propTypes = {
  title: PropTypes.string.isRequired,
  source: PropTypes.string.isRequired,
};

const Input = ({ value, onChangeText, placeholder, ...props }) => (
  <TextInput
    value={value}
    underlineColorAndroid="transparent"
    onChangeText={onChangeText}
    placeholder={placeholder}
    placeholderTextColor={colors[1103]}
    style={styles.input}
    {...props}
  />
);

Input.defaultProps = {
  placeholder: Languages.pleaseEnter,
};
Input.propTypes = {
  value: PropTypes.string.isRequired,
  onChangeText: PropTypes.func.isRequired,
  placeholder: PropTypes.string,
};

const Item = ({ title, children }) => (
  <View style={styles.itemView}>
    {title ? <Text style={styles.itemLabel}>{title}</Text> : null}
    {children}
  </View>
);

Item.propTypes = {
  title: PropTypes.string.isRequired,
  children: PropTypes.element,
};

Item.defaultProps = {
  children: null,
};

const styles = StyleSheet.create({
  image: {
    width: px2dp(215),
    height: px2dp(136),
    backgroundColor: '#eee',
    position: 'absolute',
  },
  chooseImageText: {
    fontSize: sizes.f1,
    color: colors[1102],
    textAlign: 'center',
  },
  input: {
    flex: 1,
    textAlign: 'right',
    fontSize: px2dp(22),
    color: colors[1102],
    padding: 0,
  },
  itemView: {
    minHeight: px2dp(80),
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingLeft: px2dp(66),
    paddingRight: px2dp(66),
    borderColor: colors[1104],
    borderBottomWidth: StyleSheet.hairlineWidth,
  },
  itemLabel: {
    fontSize: f2,
    color: colors[1101],
  },
  iconCon: {
    width: px2dp(80),
    height: px2dp(80),
    backgroundColor: alpha(colors.black, 0.3),
    alignItems: 'center',
    justifyContent: 'center',
    borderRadius: px2dp(40),
  },
  imageCon: {
    width: px2dp(215),
    height: px2dp(136),
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export { ChooseImage, Item, Input, AuthCode };
